---
title: Tema Kustom
description: Membuat tema kustom
---

# Tema Kustom

## Membuat tema kustom

> Catatan: API ini tidak stabil dan kemungkinan akan berubah
> di masa depan. Kami merekomendasikan untuk tetap menggunakan [tema bawaan](/docs/theming) untuk
> sementara.

Sementara tema bawaan menyediakan beberapa tingkat kustomisasi, tipe `Theme` disediakan untuk membantu Anda mendefinisikan tema kustom sendiri dengan akses tingkat rendah ke variabel tema yang mendasarinya.

```tsx
import { RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit';

const myCustomTheme: Theme = {
  blurs: {
    modalOverlay: '...',
  },
  colors: {
    accentColor: '...',
    accentColorForeground: '...',
    actionButtonBorder: '...',
    actionButtonBorderMobile: '...',
    actionButtonSecondaryBackground: '...',
    closeButton: '...',
    closeButtonBackground: '...',
    connectButtonBackground: '...',
    connectButtonBackgroundError: '...',
    connectButtonInnerBackground: '...',
    connectButtonText: '...',
    connectButtonTextError: '...',
    connectionIndicator: '...',
    downloadBottomCardBackground: '...',
    downloadTopCardBackground: '...',
    error: '...',
    generalBorder: '...',
    generalBorderDim: '...',
    menuItemBackground: '...',
    modalBackdrop: '...',
    modalBackground: '...',
    modalBorder: '...',
    modalText: '...',
    modalTextDim: '...',
    modalTextSecondary: '...',
    profileAction: '...',
    profileActionHover: '...',
    profileForeground: '...',
    selectedOptionBorder: '...',
    standby: '...',
  },
  fonts: {
    body: '...',
  },
  radii: {
    actionButton: '...',
    connectButton: '...',
    menuButton: '...',
    modal: '...',
    modalMobile: '...',
  },
  shadows: {
    connectButton: '...',
    dialog: '...',
    profileDetailsAction: '...',
    selectedOption: '...',
    selectedWallet: '...',
    walletLogo: '...',
  },
};

const App = () => (
  <RainbowKitProvider theme={myCustomTheme} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>;
)
```

### Memperluas tema bawaan

Anda dapat memperluas tema bawaan tanpa perlu mendefinisikan ulang seluruh tema. Ini berguna ketika Anda hanya ingin menimpa token tema tertentu.

Untuk melakukan itu, instal `lodash.merge` (atau yang setara):

```bash
npm install lodash.merge
```

Import bersama dengan tema yang ingin Anda perluas (misal: `darkTheme`) dan tipe `Theme` TypeScript:

```tsx
import merge from 'lodash.merge';
import {
  RainbowKitProvider,
  darkTheme,
  Theme,
} from '@rainbow-me/rainbowkit';
```

Kemudian, gabungkan tema bawaan dengan token tema yang ingin Anda timpa. Dalam contoh ini, saya menimpa token `accentColor` agar sesuai dengan warna aksen merek saya.

```tsx
const myTheme = merge(darkTheme(), {
  colors: {
    accentColor: '#07296d',
  },
} as Theme);
```

Akhirnya, Anda dapat meneruskan tema kustom Anda ke prop `theme` dari `RainbowKitProvider`.

```tsx
const App = () => {
  return (
    <RainbowKitProvider theme={myTheme} {...etc}>
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

### Membuat pemilih tema kustom

Jika aplikasi Anda di-render di server atau secara statis dan memungkinkan pengguna untuk secara manual beralih antara tema, sistem tema RainbowKit dapat dihubungkan ke pemilih CSS kustom dengan fungsi berikut yang dapat digunakan dengan sistem CSS-in-JS mana pun:

- `cssStringFromTheme`
- `cssObjectFromTheme`

Fungsi-fungsi ini mengembalikan CSS yang mengatur semua variabel tema yang diperlukan. Karena mendukung string dan objek, ini dapat diintegrasikan dengan sistem CSS-in-JS mana pun.

Sebagai contoh dasar, Anda dapat merender elemen `style` sendiri dengan pemilih kustom untuk setiap tema. Karena kita mengendalikan rendering CSS tema, kita melewatkan `null` ke prop `theme` sehingga RainbowKitProvider tidak merender gaya apa pun untuk kita. Juga perhatikan penggunaan opsi extends pada fungsi cssStringFromTheme yang menghilangkan variabel tema apa pun yang sama dengan tema dasar.

```tsx
import {
  RainbowKitProvider,
  cssStringFromTheme,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider theme={null} {...etc}>
      <style
        dangerouslySetInnerHTML={{
          __html: `
            :root {
              ${cssStringFromTheme(lightTheme)}
            }

            html[data-dark] {
              ${cssStringFromTheme(darkTheme, {
                extends: lightTheme,
              })}
            }
          `,
        }}
      />

      {/* ... */}
    </RainbowKitProvider>
  );
};
```
